<template>
  <div>
    <div class="full-screen">
      <div class="form">
        <div :class="index === 3 ? 'bottom' : ''" v-for="(contact, index) in info.info" :key="index">
          <section class="form-subtitle">
            <h2 v-if="index === 0">请添加第1位联系人</h2>
            <h2 v-if="index === 1">请添加第2位联系人</h2>
            <h2 v-if="index === 2">请添加第3位联系人</h2>
            <h2 v-if="index === 3">请添加第4位联系人(必要条件下将电话确认您的丰期信息)</h2>
          </section>
          <div class="block-nohr">
            <div class="group hairlines-bottom">
              <label>联系人关系</label>
              <input type="text" v-if="index === 0" value="直系亲属1" readonly>
              <input type="text" v-if="index === 1" value="直系亲属2" readonly>
              <input type="text" v-if="index === 2" value="同学或同事" readonly>
              <input type="text" v-if="index === 3" value="紧急联系人" readonly>
            </div>
            <div class="group hairlines-bottom">
              <label :for="'name' + (index + 1)">联系人姓名</label>
              <input class="required" :id="'name' + (index + 1)" type="text" placeholder="请输入姓名" :value="contact.name" @focus="intoView">
            </div>
            <div class="group">
              <label :for="'phone' + (index + 1)">联系人电话</label>
              <input class="required phone" :id="'phone' + (index + 1)" type="number" placeholder="请输入电话" @input="checkPhone" :value="contact.phone" @focus="intoView">
            </div>
          </div>
        </div>
      </div>
      <footer class="form-footer">
        <button class="return hairlines-top" @click="back"><i class="iconfont icon-return2"></i>返回</button>
        <input class="next" type="button" value="保存，下一步" @click="toNext" :disabled="info.checkStatus">
      </footer>
    </div>
  </div>
</template>
<script>
  import $ from 'edom'
  export default {
    name: 'ContactPerson',
    data () {
      return {
        title: '添加联系人',
        isUpdate: this.$store.state.profileStep > 2
      }
    },
    computed: {
      info () {
        return this.$store.state.profile.contact
      }
    },
    methods: {
      back () {
        this.$router.push('/profile/manage')
      },
      toNext () {
        let required = $('.required')
        let length = required.length
        let curObj = null
        let saveData = {}
        for (let i = 0; i < length; i++) {
          curObj = required[i]
          if (!curObj.value) {
            $().Mnews('有选项没有填写', 1000)
            return
          } else if (curObj.classList.contains('phone') && !$().checkPhone(curObj.value)) {
            $().Mnews('请检查手机号码', 1000)
            return
          } else {
            saveData[curObj.id] = curObj.value
          }
        }
        this.axios.post('/api/contact/save', Object.assign({
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }, saveData))
        .then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.$store.commit('profileStepSet', 3)
            this.$router.push('/profile/step3')
          } else {
            $().Mnews(data.desc, 1000)
          }
        })
      },
      checkPhone (event) {
        let phone = event.target
        let value = phone.value
        let length = value.length
        if (length > 11) {
          phone.value = value.substring(0, 11)
        }
      },
      getSavedInfo () {
        this.axios.post('/api/auth/get_contact_info', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }).then((res) => {
          let data = res.data
          let desc = data.desc
          if (desc.contact_status === '1' || desc.contact_status === '3') {
            this.NoModify = true
          }
          if (desc.contact_list) {
            this.$store.commit('getCacheContact', desc.contact_list)
          }
        })
      },
      intoView: function (event) {
        event.target.scrollIntoView(true)
      }
    },
    created () {
      this.setTitle(this.title)
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  @import '../../styles/form.scss';
  .form-subtitle{
    padding: rem(20) rem(24);
    font-size: rem(26);
    color: #999;
  }
  .block-nohr{
    .group{
      input{
        padding-left: rem(50);
        text-align: left !important;
      }
      input[readonly]{
        color: #666;
      }
    }
  }
  .bottom{
    margin-bottom: rem(45);
  }
  .next:disabled{
    background: #d0d0d0;
  }
</style>
